<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 账户审核 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <h2>{{ message }}</h2>
</div>

<div id="tableView">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="单位名称">
                <el-input v-model="searchForm.searchname" placeholder="请输入单位名称查询"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
            </el-form-item>

        </el-form>
    </el-row>

    <!--列表-->
    <el-row>
        <el-table :data="tableData" v-loading.body="loading" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="105"></el-table-column>
            <el-table-column prop="name" label="单位名称" width="150"></el-table-column>
            <el-table-column prop="industry" label="所属行业" width="130"></el-table-column>
            <el-table-column prop="grading" label="申报单位" width="140"></el-table-column>
            <el-table-column prop="address" label="单位地址" width="100"></el-table-column>
            <el-table-column prop="SHtime" label="审核时间" width="130"></el-table-column>
            <el-table-column prop="SHuser" label="审核人员" width="130"></el-table-column>
            <el-table-column :formatter="Tablestate" prop="state" label="审核状态" width="130"></el-table-column>

            <el-table-column
                    label="操作">
                <template scope="scope">
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="lookClick(scope.row)">审核/查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">

        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[6,12,18,24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>


    <el-dialog title="注册信息查看" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm1" label-width="80px" :rules="editFormRules" ref="editForm1">
            <el-form-item label="主管单位" prop="manage">
                <el-input v-model="editForm1.manage" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="单位名称" prop="name">
                <el-input v-model="editForm1.name" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="单位类别" prop="type">
                <el-input v-model="editForm1.type" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="单位性质" prop="nature">
                <el-input v-model="editForm1.nature" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属行业" prop="industry">
                <el-input v-model="editForm1.industry" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="申报等级" prop="grading">
                <el-input v-model="editForm1.grading" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="账户人数" prop="number">
                <el-input v-model="editForm1.number" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm1.email" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkman">
                <el-input v-model="editForm1.linkman" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="linknum">
                <el-input v-model="editForm1.linknum" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="单位地址" prop="address">
                <el-input v-model="editForm1.address" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="单位介绍" prop="introduce">
                <el-input v-model="editForm1.introduce" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-input v-model="editForm1.state" type="hidden" auto-complete="off" disabled></el-input>
            <el-button :plain="true" :disabled="edit" type="success" size="small" icon="edit" @click="editClick('editForm')" >审核通过</el-button>
            <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')">取消</el-button>
        </el-form>
    </el-dialog>
</div>
</body>
<script>

    var  app=new Vue({
        el:"#app",
        data: {
            message: '账户审核',
        }
    })


    var tableView=new Vue({
        el:"#tableView",
        data: {

            edit:false,
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm:{
                searchname:"",
            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage:1,
            //分页大小
            pageSize:6,
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示，隐藏弹出框
            editFormVisible: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            //编辑界面数据
            editForm: {
                id:"",
                name:"",
                industry:"",
                address:"",
                SHtime:"",
                state:"",
                grading:""
            },
            editForm1:{
                manage:"",
                name:"",
                type:"",
                nature:"",
                industry:"",
                grading :"",
                number:"",
                email :"",
                linkman :"",
                linknum :"",
                address:"",
                introduce:""
            }
        },created:function () {
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            axios.post('/zhsh/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                self.total=response.data.total;
                self.tableData = response.data.data;

            })

        },methods: {
            loadingData: function () {
                var _self = this;
                // _self.loading = true;
                var start = (this.currentPage - 1) * this.pageSize;
                var searchForm = {'start': start, 'pageSize': this.pageSize, 'name': this.searchname};
                axios.post('/zhsh/list', searchForm).then(function (response) {
                    _self.tableData = response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function () {
                    console.info("加载数据成功");
                    //_self.loading = false
                }, 300);
            },Tablestate:function (row) {
                if (row.state == 1) {
                    return "市级审核通过";
                } else if (row.state == 0) {
                    return "审核未通过";
                } else if (row.state==2) {
                    return "二级审核已通过";
                }else {
                    return "未审核";
                }
            }
            , editClick: function (row) {
                var _self = this;
                var state=this.editForm1.state;
                var editForm1=this.editForm1;
                if (state==0||state==1){
                    _self.$confirm('确认通过对' + editForm1.name + '的单位审核通过操作吗?', '提示', {
                        type: 'warning'
                    }).then(function () {
                        axios.post('/zhsh/pan',editForm1).then(function (response) {
                            if (response.data==0){
                                    _self.$notify.error({
                                        title: '审核错误',
                                        message: '该单位的市级审核并未通过，请勿越级审核'
                                    });
                            }
                            if (response.data==1){
                                axios.post('/zhsh/shenhe1',editForm1).then(function (response) {
                                    _self.$notify({
                                        title: '审核成功',
                                        message: '市级审核完毕，省级审核完毕',
                                        type: 'success'
                                    });
                                    _self.loadingData();
                                    this.editFormVisible = false;//弹出层，让隐藏的弹出层关闭
                                })
                            }
                            if (response.data==2){//一级审核
                                axios.post('/zhsh/shenhe',editForm1).then(function (response) {
                                    _self.$notify({
                                        title: '审核成功',
                                        message: '市级审核成功',
                                        type: 'success'
                                    });
                                    _self.loadingData();
                                    this.editFormVisible = false;//弹出层，让隐藏的弹出层关闭
                                })
                            }
                            if (response.data==3){//市级审核市级完毕后  实际无法再次审核
                                    _self.$notify.error({
                                        title: '审核重复',
                                        message: '市级审核已审核，请勿重复审核',
                                    });
                                    _self.loadingData();
                                    this.editFormVisible = false;//弹出层，让隐藏的弹出层关闭
                            }
                            //self.total=response.data.total;
                            //self.tableData = response.data.data;

                        })
                    })
                }


            }, lookClick: function (row) {
                var id = row.id;
                this.goUrl = '/zhsh/chakan/' + id;
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                this.editForm1 = Object.assign({}, row);
            }
            , resetForm: function () {
                this.editFormVisible = false;//弹出层，让隐藏的弹出层关闭
            },
            searchClick: function () {
                var self = this;
                var start = (this.currentPage - 1) * this.pageSize;
                var searchForm = {'start': start, 'pageSize': this.pageSize, 'name': this.searchForm.searchname};
                axios.post('/zhsh/list', searchForm).then(function (response) {
                    self.total = response.data.total;
                    self.tableData = response.data.data;
                })
                //self.loadingData();//搜索不用重新加载数据
            },//分页大小修改事件
            pageSizeChange: function (val) {
                console.log('每页 ' + val + ' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange: function (val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            }
        }
})

</script>
</html>